* {
	font-family:Arial;
}

body {
	margin:0;
}

#tabline {
	list-style:none;
	padding-left:0;
	margin-bottom:0;
	border-bottom:1px solid blue;
}

#tabline > li {
	display:inline-block;
	border:1px solid #1874CD;
	border-bottom-width:0;
	margin:0 10px;
	padding:3px 10px;
	cursor:pointer;
	font-style:italic;
	font-weight:bold;
}

#tabline > li.current {
	background-color:#00BFFF;
}

fieldset {
	width:420px;
	height:70px;
	display:inline-block;
	vertical-align:bottom;
}

label {
	display:inline-block;
	width:100px;
	text-align:right;
	padding-right:4px;
}

input[type="text"] {
	width:275px;
}

img.validation {
	width:22px;
	height:22px;
	vertical-align:bottom;
	margin-left:3px;
	visibility:hidden;
}

#fieldsets {
	white-space:nowrap;
}

div.actions {
	text-align:right;
}

section.tab {
	display:none;
	padding:10px;
}

h1 {
	padding:0 10px;
}

h2 {
	margin-top:0;
	padding:0 5px;
	display:none;
}

h3 {
	margin:15px 0 5px 0;
	padding:0 5px;
}

p {
	padding:0 5px;
	margin:5px 0;
}

p.info {
	font-size:small;
}

#infoControlSection {
	float:right;
}
#infoControlSection label {
	display:inline;
	width:auto;
}

#stepByStepControls {
	display:none;
}

#prevLine, #prevStep, #nextLine, #nextStep {
	display:inline-block;
	height:20px;
	margin:8px 10px 0 10px;
	cursor:pointer;
}
#prevLine.disabled, #prevStep.disabled, #nextLine.disabled, #nextStep.disabled {
	cursor:default;
}

#prevLine {
	background-image:url('../images/button_prevline.png');
	width:30px;
}
#prevLine.disabled {
	background-image:url('../images/button_prevline_disabled.png');
}
#prevLine:not(.disabled):hover, #prevLine:not(.disabled):focus {
	background-image:url('../images/button_prevline_hover.png');
}
#prevLine:not(.disabled):active {
	background-image:url('../images/button_prevline_pressed.png');
}

#prevStep {
	background-image:url('../images/button_prev.png');
	width:20px;
}
#prevStep.disabled {
	background-image:url('../images/button_prev_disabled.png');
}
#prevStep:not(.disabled):hover, #prevStep:not(.disabled):focus {
	background-image:url('../images/button_prev_hover.png');
}
#prevStep:not(.disabled):active {
	background-image:url('../images/button_prev_pressed.png');
}

#nextLine {
	background-image:url('../images/button_nextline.png');
	width:30px;
}
#nextLine.disabled {
	background-image:url('../images/button_nextline_disabled.png');
}
#nextLine:not(.disabled):hover, #nextLine:not(.disabled):focus {
	background-image:url('../images/button_nextline_hover.png');
}
#nextLine:not(.disabled):active {
	background-image:url('../images/button_nextline_pressed.png');
}

#nextStep {
	background-image:url('../images/button_next.png');
	width:20px;
}
#nextStep.disabled {
	background-image:url('../images/button_next_disabled.png');
}
#nextStep:not(.disabled):hover, #nextStep:not(.disabled):focus {
	background-image:url('../images/button_next_hover.png');
}
#nextStep:not(.disabled):active {
	background-image:url('../images/button_next_pressed.png');
}

#result {
	border-spacing:0;
	margin:10px 0 0 5px;
}

#result th {
	color:#1874CD;
	vertical-align:middle;
	white-space:nowrap;
}

#result td {
	vertical-align:middle;
	text-align:center;
	font-size:small;
	overflow:visible;
}

#result td > div {
	position:relative;
	overflow:visible;
}

#result td.path {
	background-color:yellow;
}
#result td.right {
	background-color:#90EE90;
}
#result td.wrong {
	background-color:#FFDEAD;
}

#result td div.a_top, #result td div.a_left, #result td div.a_topleft, #result td div.a_top_path, #result td div.a_left_path, #result td div.a_topleft_path {
	position:absolute;
	width:16px;
	height:16px;
}

#result td div.a_top {
	background-image:url('../images/arrow_down.png');
	top:-14px;
	left:7px;
}

#result td div.a_top_path {
	background-image:url('../images/arrow_down_colored.png');
	top:-14px;
	left:7px;
}

#result td div.a_left {
	background-image:url('../images/arrow_right.png');
	top:1px;
	left:-7px;
}

#result td div.a_left_path {
	background-image:url('../images/arrow_right_colored.png');
	top:1px;
	left:-7px;
}

#result td div.a_topleft {
	background-image:url('../images/arrow_rightdown.png');
	top:-12px;
	left:-7px;
}

#result td div.a_topleft_path {
	background-image:url('../images/arrow_rightdown_colored.png');
	top:-12px;
	left:-7px;
}

#topleftcorner {
	border-bottom:1px solid #1874CD;
	border-right:1px solid #1874CD;
}

#topheadline {
	border-bottom:1px solid #1874CD;
	height:25px;
	color:black !important;
}

#leftheadline {
	border-right:1px solid #1874CD;
	width:25px;
	min-height:100px;
	color:black !important;
}

#result th.top {
	border-bottom:1px solid #1874CD;
	height:26px;
	width:30px;
}

#result th.left {
	border-right:1px solid #1874CD;
	height:26px;
	width:30px;
}

#user_input {
	width:20px;
}

#alignmentinfo {
	display:none;
	margin:20px 0 0 5px;
	padding:0;
}

#alignmentinfo p {
	margin:5px 0 0 5px;
	padding:0;
}

#alignments {
	margin:10px 0 0 5px;
}

#alignments > table {
	margin:5px 0;
	border-spacing:0;
	border-top:1px solid #1874CD;
	border-right:1px solid #1874CD;
}

#alignments > table th {
	text-align:center;
	vertical-align:middle;
	width:25px;
	border-right:1px solid #1874CD;
	border-bottom:1px solid #1874CD;
}

#alignments > table td {
	text-align:center;
	vertical-align:middle;
	width:25px;
	height:25px;
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #1874CD;
}

#alignments > table td.change {
	color:red;
	font-weight:bold;
}
#alignments .insert, #alignmentinfo .insert {
	background-color:#FFDEAD;
}
#alignments .delete, #alignmentinfo .delete {
	background-color:#AEEEEE;
}
#alignments .update, #alignmentinfo .update {
	background-color:#90EE90;
}
#alignmentinfo span.insert, #alignmentinfo span.update, #alignmentinfo span.delete {
	padding:2px 5px;
}

.leftheadline {
	-webkit-transform: rotate(-90deg) translate(-45px, 10px);
	-moz-transform: rotate(-90deg) translate(-47px, 10px);
	-o-transform: rotate(-90deg) translate(-48px, 10px);
	-ms-transform: rotate(-90deg) translate(-45px, 10px);
	transform: rotate(-90deg) translate(-45px, 10px);
	width:1px;
	overflow:visible;
}

#bubble {
	position:absolute;
	left:155px;
	top:270px;
	width:350px;
	height:110px;
}
#bubble .bottomleft {
	position:absolute;
	left:0px;
	bottom:0px;
	width:60px;
	height:60px;
	background-image:url('../images/bubble_bottomleft.png');
}
#bubble .bottomright {
	position:absolute;
	right:0px;
	bottom:0px;
	width:23px;
	height:60px;
	background-image:url('../images/bubble_bottomright.png');
}
#bubble .topleft {
	position:absolute;
	left:0px;
	top:0px;
	width:32px;
	height:20px;
	background-image:url('../images/bubble_topleft.png');
}
#bubble .topright {
	position:absolute;
	right:0px;
	top:0px;
	width:23px;
	height:20px;
	background-image:url('../images/bubble_topright.png');
}
#bubble .horizontalleft {
	position:absolute;
	left:0px;
	top:20px;
	bottom:60px;
	width:32px;
	background-image:url('../images/bubble_horizontalleft.png');
}
#bubble .horizontalright {
	position:absolute;
	right:0px;
	top:20px;
	bottom:60px;
	width:23px;
	background-image:url('../images/bubble_horizontalright.png');
}
#bubble .vertikalbottom {
	position:absolute;
	right:23px;
	left:60px;
	bottom:0px;
	height:60px;
	background-image:url('../images/bubble_vertikalbottom.png');
}
#bubble .vertikaltop {
	position:absolute;
	right:23px;
	left:32px;
	top:0px;
	height:20px;
	background-image:url('../images/bubble_vertikaltop.png');
}
#bubble .content {
	position:absolute;
	left:32px;
	bottom:60px;
	top:20px;
	right:23px;
	background-color:#F7FF93;
	padding:5px;
	overflow:hidden;
}

#bubble2 {
	position:absolute;
	left:155px;
	top:270px;
	width:350px;
	height:110px;
}
#bubble2 .bottomleft {
	position:absolute;
	left:0px;
	bottom:0px;
	width:32px;
	height:20px;
	background-image:url('../images/bubble2_bottomleft.png');
}
#bubble2 .bottomright {
	position:absolute;
	right:0px;
	bottom:0px;
	width:23px;
	height:20px;
	background-image:url('../images/bubble2_bottomright.png');
}
#bubble2 .topleft {
	position:absolute;
	left:0px;
	top:0px;
	width:60px;
	height:60px;
	background-image:url('../images/bubble2_topleft.png');
}
#bubble2 .topright {
	position:absolute;
	right:0px;
	top:0px;
	width:23px;
	height:60px;
	background-image:url('../images/bubble2_topright.png');
}
#bubble2 .horizontalleft {
	position:absolute;
	left:0px;
	top:60px;
	bottom:20px;
	width:32px;
	background-image:url('../images/bubble_horizontalleft.png');
}
#bubble2 .horizontalright {
	position:absolute;
	right:0px;
	top:60px;
	bottom:20px;
	width:23px;
	background-image:url('../images/bubble_horizontalright.png');
}
#bubble2 .vertikalbottom {
	position:absolute;
	right:23px;
	left:32px;
	bottom:0px;
	height:20px;
	background-image:url('../images/bubble2_vertikalbottom.png');
}
#bubble2 .vertikaltop {
	position:absolute;
	right:23px;
	left:60px;
	top:0px;
	height:60px;
	background-image:url('../images/bubble2_vertikaltop.png');
}
#bubble2 .content {
	position:absolute;
	left:32px;
	bottom:20px;
	top:60px;
	right:23px;
	background-color:#F7FF93;
	padding:5px;
	overflow:hidden;
}

#bubbleExt {
	position:absolute;
	left:60px;
	right:23px;
	top:50px;
	height:100px;
}
#bubbleExt .bottomleft, #bubbleExt2 .bottomleft {
	position:absolute;
	left:0px;
	bottom:0px;
	width:10px;
	height:10px;
	background-image:url('../images/box_bottomleft.png');
}
#bubbleExt .bottomright, #bubbleExt2 .bottomright {
	position:absolute;
	right:0px;
	bottom:0px;
	width:10px;
	height:10px;
	background-image:url('../images/box_bottomright.png');
}
#bubbleExt .horizontalleft, #bubbleExt2 .horizontalleft {
	position:absolute;
	left:0px;
	top:10px;
	bottom:10px;
	width:10px;
	background-image:url('../images/box_horizontalleft.png');
}
#bubbleExt .horizontalright, #bubbleExt2 .horizontalright {
	position:absolute;
	right:0px;
	top:10px;
	bottom:10px;
	width:10px;
	background-image:url('../images/box_horizontalright.png');
}
#bubbleExt .vertikalbottom, #bubbleExt2 .vertikalbottom {
	position:absolute;
	right:10px;
	left:10px;
	bottom:0px;
	height:10px;
	background-image:url('../images/box_vertikalbottom.png');
}
#bubbleExt .content, #bubbleExt2 .content {
	position:absolute;
	left:10px;
	bottom:10px;
	top:0px;
	right:10px;
	background-color:#F7FF93;
	padding:20px 5px 5px 5px;
	overflow:hidden;
}

#bubbleExt2 {
	position:absolute;
	left:32px;
	right:23px;
	top:90px;
	height:100px;
}

#bubble .content p, #bubble2 .content p {
	margin:0;
	padding:0;
	font-size:0.88em;
}

#bubble .content span.wrong, #bubble2 .content span.wrong {
	color:red;
}

#bubble .content span.right, #bubble2 .content span.right {
	color:green;
}

#bubble .content img, #bubble2 .content img {
	vertical-align:bottom;
	margin-left:8px;
}

#progressblocking {
	position:fixed;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	vertical-align:middle;
	text-align:center;
	background-color:black;
	opacity: 0.8;
}
#progressblocking img {
	margin-top:200px;
}
#progressblocking p {
	color:white;
}